window.onload = function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "C3C3C3", 	//点颜色
        stroke: "EDEDED", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);




    let dataList = [
        // 重构数据结构
        {
            title: '金融案例',
            enTitle: 'Financial Case',
            data: [
                {
                    img: 'szyh.png',
                    name: '苏州银行数据API服务系统',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'hcfc2.png',
                    name: '河北幸福消金三方数据管理平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'sznsyh.png',
                    name: '苏州农商行数据敏捷共享平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                ]
        },
        {
            title: '企业案例',
            enTitle: 'business Case',
            data: [
                {
                    img: 'szyh.png',
                    name: '苏州银行数据API服务系统',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'hcfc2.png',
                    name: '河北幸福消金三方数据管理平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'sznsyh.png',
                    name: '苏州农商行数据敏捷共享平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
            ]
        },
        {
            title: '政府案例',
            enTitle: 'Government Case',
            data: [
                {
                    img: 'szyh.png',
                    name: '苏州银行数据API服务系统',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'hcfc2.png',
                    name: '河北幸福消金三方数据管理平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
                {
                    img: 'sznsyh.png',
                    name: '苏州农商行数据敏捷共享平台',
                    desc: '苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。',
                    url: './customerDetails.html'
                },
            ]
        }
    ];



    //定义变量保存字符串
    let HtmlStr = ''

    //2.遍历拼接html结构
    dataList.forEach(function (v) {
        //楼层

        // 拆分
        //头
        HtmlStr += `<div class="items">
        <!-- 标题 -->
        <div class="cTitle font18">
            <h2 class="bold c0">${v.title} <span class="font12 c9">/${v.enTitle}</span></h2>
        </div>
        <!-- 内容 -->
        <ul class="mt10 clearfix">`;
        //循环的li

        //二次循环data数据   v.data当前楼层中的data
        v.data.forEach(function (v) {

            let str = v.desc.substr(0, 100);

            HtmlStr += `<li>
                <img src="./img/${v.img}" alt="">
                <h4 class="mt10 font14">${v.name}</h4>
                <p class="font12">${str}...</p>
                <a href="${v.url}" class="mt25 font12">了解详情</a>
            </li>`;
        })

        // 结束的标签
        HtmlStr += `</ul></div>`;


    })

    //添加到网页指定位置
    getEle('#customer').innerHTML = HtmlStr;




    let lis=getEleAll('#floor li')
    let items=getEleAll('#customer .items')

    lis.forEach(function(v,i){
        v.addEventListener('click',function(){
            document.documentElement.scrollTop=items[i].offsetTop;
        })
    })
















}
